<template>

  <div class="body-layout" ref="container">

    <nav-header></nav-header>
    <aside-left></aside-left>
    <aside-center></aside-center>
    <aside-right></aside-right>

    <!--<aside-layer v-show="showChooseImg"></aside-layer>-->
    <!-- <aside-clip-layer v-show="showClipLayer"></aside-clip-layer> -->
    <div class="open" id="open" @click="handleOpen">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-burger"></use>
      </svg>
    </div>

    <article-preview v-show="showPreviewLayer"></article-preview>

    <div class="layer-box" v-if="showChooseImg || corpperIsShow">

      <div class="self-layer" v-if="showChooseImg || corpperIsShow"></div>

      <div class="imglist-modal" v-if="showChooseImg">
        <div>
          <svg class="icon icon-close" aria-hidden="true" @click="cancelImg">
            <use xlink:href="#icon-close"></use>
          </svg>
          <p class="title-tips" v-show="!isfromAddimg">请选择一张图片作为封面<em>(推荐尺寸1000*400像素)</em></p>
          <p class="title-tips" v-show="isfromAddimg">选择图片</p>
          <!--图片标签  -->
          <div class="imglist-box">
            <div class="edit-column">
              <span>图片类别：</span>
              <ul class="tag-list">
                <li v-for="(item,index) in imgFolder" :class="{selector:tabList == index}" @click="clickTab(index)"
                    :title="item.categoryName">
                  <em>{{item.categoryName}}</em>/{{item.count}}
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            <!--刘一丁新增 无内容提示-->
            <div class="nocontent-tips" v-show="!imgList.length">
              <img src="../assets/images/no-pic.png"/>
              <p>素材库中暂无图片，请先在【
                <a @click.stop="gotoMaterial()">素材中心</a> 】上传图片素材。</p>
            </div>
            <!--图片列表-->
            <div class="img-list">
              <ul class="clearfix">
                <li v-for="(item,index) in imgList" @click="handleLayerClick(index)">
                  <div class="img-box">
                    <img :src="item.url+'?x-oss-process=image/resize,m_fixed,h_100,w_160'"/>
                  </div>
                  <div class="title">{{item.materialName}}</div>
                  <div class="layer-box" v-show="item.show">
                    <div class="layer"></div>
                    <img src="../assets/images/layer-icon.png"/>
                  </div>
                </li>

              </ul>
              <!--分页-->
              <div class="layer-pagination" v-show="imgList.length">
                <pagination @currentChange="handleCurrentChange" :currentPg="pageNow" :pageSize="pSize"
                            :total="allPage"></pagination>
              </div>
              <div class="button-box" v-if="imgList.length">
                <!--<span>已经选择<em>2</em>张图片，最多可选100张</span>-->
                <button v-show="chooseImg" class="save-btn-two" @click="chooseImgOk">下一步</button>
                <button v-show="!chooseImg" class="save-btn-two ash-btn">下一步</button>
                <!--<button class="cancel-btn" @click="cancelImg">取消</button>-->
              </div>
            </div>
          </div>

        </div>
      </div>

      <!--裁切-->
      <div class="self-clip-box imglist-modal" v-show="corpperIsShow">
        <!-- 处理一下 -->
        <svg class="icon icon-close" aria-hidden="true" @click="cancelCropperImg">
          <use xlink:href="#icon-close"></use>
        </svg>
        <p class="title">请剪裁所选封面图片<em>(比例为16:9)</em></p>
        <!--新的 裁剪-->
        <cropper ref="cropper1"></cropper>
        <!--新的 裁剪  over-->

        <!--旧的裁剪-->
        <!--<div class="self-clip">
              <vue-cropper ref="cropper" :outputSize="option.outputSize" :info="option.info" :autoCrop='option.autoCrop' :canMove="option.canMove" :fixed='option.fixed' :original='option.original' :fixedNumber="option.fixedNumber" :autoCropWidth="option.autoCropWidth" :img="option.img">
              </vue-cropper>
          </div>-->
        <!--旧的裁剪over-->

        <button class="save-btn-two" @click="handleClipClick">设置为封面</button>
      </div>
      <el-button :plain="true" @click="openCenter"></el-button>
    </div>
    <canvas v-show="false" id="canvas"></canvas>
  </div>
</template>
<script>


  import VueCropper from 'vue-cropper'
  import {mapState, mapActions} from 'vuex';
  import AsideLeft from '@/components/Article/ArticleLeft'
  import AsideLayer from '@/components/Article/ArticleLayer'
  import AsideCenter from '@/components/Article/ArticleCenter'
  import AsideRight from '@/components/Article/ArticleRight'
  import ArticlePreview from '@/components/Article/ArticlePreview'
  import NavHeader from '@/components/NavHeader'
  import pagination from './common/pagination.vue'
  import util from '../lib/util'

  //新的裁剪框
  import cropper from '../components/cropper.vue'
  import Cropper from 'cropperjs'

  export default {
    name: 'Index',
    components: {
      NavHeader,
      AsideLeft,
      AsideCenter,
      AsideRight,
      AsideLayer,
      ArticlePreview,
      VueCropper,
      pagination,
      cropper
    },
    data() {
      return {
        imgList: [],
        imgListNum: [],
        imgFolder: [{
          categoryId: 0,
          categoryName: "全部分类",
          count: 0
        }],
        tabIndex: 0,
        tabList: 0,
        chooseDate: {},
        dataHeight: "",
        // isShow: false,
        option: {
          img: '',
          outputSize: 1,
          info: true,
          autoCrop: true,
          fixed: true,
          original: false,
          fixedNumber: [16, 9],
          canMove: false,
          autoCropWidth: 200
        },
        pageNow: 1,
        allPage: 1,
        pSize: 30,
        chooseImg: false
      }
    },
    created() {
      this.ajaxUserList();
      this.activeArticle(this.articleDetail.articleId);
    },
    computed: {
      ...mapState([
        'articleLabelId',
        'folderId',
        //'id', // 文章id
        'articleDetail', //当前文章对象
        'showPreviewLayer',
        'showChooseImg',
        'chooseArticleImg',
        'isfromAddimg',
        'previewInfo',
        'corpperIsShow'
      ]),
    },

    methods: {
      ...mapActions([
        'clearChoeseImg',
        'activeArticle',
        'changeCropperState'
      ]),
      cancelCropperImg() {
        this.changeCropperState(false)
      },
      // 请求素材列表
      ajaxUserList: function () {

        util.ajax.post('category/list', {
          isDel: 0
        }).then((res) => {

          let data = res.data.list || [];

          this.imgFolder[0].count = res.data.totalCount;

          this.imgFolder = this.imgFolder.concat(data);

          this.clickTab(0);
        });

      },
      // 点击分类
      clickTab: function (index) {

        this.tabList = index;
        let params = {
          categoryId: this.imgFolder[index].categoryId,
          pageNo: 1,
          pageSize: this.pSize
        };
        this.ajaxList(params);
      },
      ajaxList: function (param) {
        util.ajax.post('material/list', {
          ...param
        }).then((res) => {

          if (res.data) {

            this.allPage = res.data.total;



            this.imgList = res.data.list.map((item) => {

              item.show = false;
              return item;
            })
          }

        })
      },
      // 选择图片
      handleLayerClick: function (index) {



        // 选择之前清掉之前的图片
        this.clearChoeseImg();

        this.chooseImg = true;
        this.imgList[this.tabIndex].show = false;

        this.tabIndex = index;
        this.imgList[index].show = !this.imgList[index].show;

        this.chooseDate = JSON.parse(JSON.stringify(this.imgList[index]));

      },
      // 翻页
      handleCurrentChange: function (page) {

        this.pageNow = page;
        let params = {
          categoryId: this.imgFolder[this.tabList].categoryId,
          pageNo: page,
          pageSize: this.pSize
        };
        this.ajaxList(params);

      },
      // 确定选择图片
      chooseImgOk: function () {

        if (this.isfromAddimg) {

          this.$store.commit('CHOOSE_ARTICLE_IMG', this.chooseDate)
          this.$store.commit('SHOW_CHOOSE_LAYER', false);
        } else {
          // 展示裁剪框
          this.changeCropperState(true)
          // this.corpperIsShow = true;
          this.$store.commit('CHOOSE_ARTICLE_IMG', this.chooseDate)
          // this.imgList[this.tabIndex].show = !this.imgList[this.tabIndex].show;
          this.$store.commit('SHOW_CHOOSE_LAYER', false);
        }

        //gh清空选择
        this.imgList[this.tabIndex].show = !this.imgList[this.tabIndex].show;
        this.chooseImg = false;
      },
      cancelImg: function () {
        // 清除上次选的图片
        this.clearChoeseImg()

        this.$store.commit('SHOW_CHOOSE_LAYER', false)
      },
      openCenter() {

      },
      //去素材中心
      gotoMaterial() {
        this.$router.push({
          path: "/Material/Image"
        });
      },
      handleClipClick() {
        this.$refs.cropper1.crop();
      },

      handleOpen() {
        var asideRight = document.getElementById("asideRight")
        var asidecenter = document.getElementById("asidecenter")
        var asideleft = document.getElementById("asideleft")
        var takeup = document.getElementById("takeup")
        var open = document.getElementById("open")
        takeup.style.display = 'block';
        open.style.display = 'none';
        asidecenter.style.left = '221px';
        asideRight.style.left = '522px';
        asideleft.style.display = 'block';
        this.$refs.style.display = 'none'
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .layer-box {
    position: absolute;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .self-layer {
      background: #000;
      opacity: .8;
    }
  }

  .self-clip {
    margin: 0 auto;
    width: 500px;
    height: 500px;
  }

  .self-clip-box {
    text-align: center;
    .title {
      margin-bottom: 60px;
      font-size: $fs24;
      color: $listTitleColor;
      text-align: center;
      line-height: 40px;
      em {
        font-size: $fs16;
        color: #B5B5B5;
      }
    }
    button {
      margin: 40px 20px 68px 0px;
      width: 180px;
    }
  }

  .imglist-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -580px;
    margin-top: -380px;
    padding: 30px;
    z-index: 1000;
    width: 1100px;
    height: 700px;
    background: $colorWhite;
    border-radius: 8px;
    .imglist-box {
      overflow: auto;
      height: 650px;
    }
    .icon-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      color: $vfConcentColor;
    }
    .title-tips {
      margin-bottom: 20px;
      text-align: center;
      font-size: $fs24;
      line-height: 40px;
      color: $listTitleColor;
      em {
        font-size: $fs16;
        color: #B5B5B5;
      }
    }
    .edit-column {
      display: flex;
      justify-content: flex-start;
      span {
        margin-right: 10px;
        line-height: 30px;
        font-size: $fs14;
      }
      .tag-list {
        width: auto;
        max-width: 85%;
        li {
          float: left;
          margin: 0px 10px 10px 0px;
          padding: 0px 15px;
          line-height: 30px;
          color: $listTitleColor;
          font-size: $fs14;
          border: 1px solid $listborderColor;
          border-radius: 15px;
          background: $colorWhite;
          cursor: pointer;
          em {
            float: left;
            margin-right: 5px;
            display: inline-block;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-style: normal!important;
          }
        }
        .selector {
          color: $colorWhite;
          border: 1px solid $mainborderColor;
          background: $mainborderColor;
        }
      }
      .tool-box {
        float: left;
        li {
          position: relative;
          float: left;
          margin-left: 10px;
          width: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 50%;
          border: 1px solid $listborderColor;
          background: $colorWhite;
        }
      }
    }
    .img-list {
      padding: 20px 0px 0px;
      ul {
        height: 468px;
        overflow: auto;
        li {
          position: relative;
          margin: 0px 20px 10px 0px;
          padding-bottom: 5px;
          float: left;
          width: 160px;
          .img-box {
            margin-bottom: 5px;
            width: 100%;
            height: 100px;
            border: 1px solid $borderbottomColor;
            box-sizing: border-box;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .title {
            border: none;
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .layer-box {
            /*display: none;*/
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -20px;
              margin-top: -20px;
              width: 40px;
              height: 40px;
              z-index: 2;
            }
            .layer {
              position: absolute;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              z-index: 2;
              background: rgba(255, 255, 255, 1);
              border: 1px solid $mainborderColor;
              .del-img {
                margin: 30px auto 20px;
                width: 100px;
                line-height: 30px;
                text-align: center;
                font-size: $fs14;
                border: 1px solid #3c4b68;
                background: #3c4b68;
                border-radius: 15px;
                color: $colorWhite;
                cursor: pointer;
              }
              .new-name {
                margin: 0 auto;
                width: 100px;
                line-height: 30px;
                font-size: $fs14;
                text-align: center;
                border: 1px solid $listborderColor;
                background: $colorWhite;
                border-radius: 15px;
                color: $listTitleColor;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  .layer-pagination {
    padding-top: 20px;
    text-align: center;
  }

  .button-box {
    padding-top: 20px;
    text-align: center;
    span {
      font-size: $fs14;
      line-height: 40px;
      color: $listTitleColor;
      em {
        color: $borderColor;
      }
    }
    button {
      width: 180px;
    }
    .cancel-btn {
      margin-left: 20px;
    }
  }

  .open {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 0px;
    background: $mainborderColor;
    width: 40px;
    height: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color: $colorWhite;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    .icon {
      width: 20px;
      height: 20px;
    }
  }

  /*新的裁剪框css*/
  .self-clip-cropper {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
  }

  #demo {
    z-index: 9999;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  #demo #button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: white;
  }

  #demo .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
  }

  #demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #demo #image {
    max-width: 100%;
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  /*.cropper-modal {
  opacity: .5;
  background-color: #000;
}*/
  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {
    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {
    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f;
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('');
  }

  .cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }

  /*新的裁剪框css  over*/

</style>
